<template>
  <div>
    <Nav></Nav>
    <div class="container-fluid" style="margin-top: 100px">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
          <table
            class="text-center table table-bordered"
            align="center"
            width="100%"
          >
            <tr class="bg-light text-black-50">
              <th colspan="2"><h3>修改商品信息</h3></th>
            </tr>
            <!--                    <input type="hidden" name="productId" th:value="${product.id}">-->
            <tr>
              <td style="width: 150px">名称：</td>
              <input
                type="hidden"
                name="productId"
                :value="editProductInfo.id"
              />
              <td>
                <input
                  class="form-control"
                  placeholder="商品名称"
                  type="text"
                  name="productName"
                  v-model="editProductInfo.productName"
                />
              </td>
            </tr>
            <tr>
              <td>单价：</td>
              <td>
                <input
                  class="form-control"
                  placeholder="单价"
                  type="number"
                  name="price"
                  v-model="editProductInfo.price"
                />
              </td>
            </tr>
            <tr>
              <td>库存：</td>
              <td>
                <input
                  class="form-control"
                  placeholder="库存"
                  type="number"
                  name="stock"
                  v-model="editProductInfo.stock"
                />
              </td>
            </tr>
            <tr>
              <td>图片：</td>
              <td>
                <img
                  :src="editProductInfo.imageUrl"
                  class="img-fluid img-thumbnail"
                  alt=""
                  style="width: 100px; height: 40%; object-fit: cover"
                />
              </td>
            </tr>
            <tr>
              <td>商品图片：</td>
              <td>
                <el-upload
                  class="upload-demo"
                  action="/api/upload"
                  multiple
                  :on-preview="handlePreview"
                  :on-success="handleSuccess"
                >
                  <el-button type="primary">选择图片</el-button>
                </el-upload>
              </td>
            </tr>
            <tr>
              <td>详情：</td>
              <td>
                <input
                  class="form-control"
                  placeholder="商品描述"
                  type="text"
                  name="description"
                  v-model="editProductInfo.description"
                />
              </td>
            </tr>
            <tr>
              <td>
                <input
                  class="btn btn-outline-warning"
                  style="width: 100px"
                  value="返回"
                  @click="back()"
                />
              </td>
              <td>
                <input
                  class="btn btn-success"
                  style="width: 200px"
                  type="submit"
                  value="修改"
                  @click="updateGoods()"
                />
              </td>
              <td>
                <input
                  class="btn btn-outline-warning"
                  type="reset"
                  value="清空"
                />
              </td>
            </tr>
          </table>
        </div>
        <div class="col-md-3"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="Edit">
import Nav from "../Nav.vue";
import "../../assets/css/bootstrap.min.css";
import "../../assets/css/font-awesome.css";
import { onMounted, ref, reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getProductDetail, updateProduct } from "../../api/product";
import { ElMessage } from "element-plus";
const route = useRoute();
const router = useRouter();

const editProductInfo = reactive({
  id: "",
  productName: "",
  price: 0,
  stock: 0,
  description: "",
  imageUrl: "",
});

const productId = route.params.id as string;
const getProductInfo = async () => {
  const res = await getProductDetail(productId);
  console.log(res);
  editProductInfo.id = res.data.data.id;
  editProductInfo.productName = res.data.data.productName;
  editProductInfo.price = res.data.data.price;
  editProductInfo.stock = res.data.data.stock;
  editProductInfo.description = res.data.data.description;
  editProductInfo.imageUrl = res.data.data.imageUrl;
};
const updateGoods = async () => {
  const res = await updateProduct(editProductInfo);
  if (res.data.code === 1) {
    ElMessage.success("修改成功");
    setTimeout(() => {
      router.push("/productList");
      window.location.href = "/productList";
    }, 2000);
  }
};
const handlePreview: UploadProps["onPreview"] = (uploadFile) => {};
const handleSuccess: UploadProps["onSuccess"] = (value) => {
  if (value.code === 1) {
    ElMessage.success("图片上传成功")
    editProductInfo.imageUrl = value.data;
  }
  if (value.code === 0) {
    ElMessage.error(value.msg);
  }
};
watch(
  () => route.params.id,
  async (newId: any) => {
    if (newId !== productId) {
      productId = newId;
      product = null;
      await onMounted();
    }
  }
);
const back = () => {
  window.location.href = "/productList";
}
onMounted(getProductInfo);
</script>

<style scoped></style>
